@if (branding$ | async; as branding) {
  @let header = branding.header;
  @if (show) {
    <header class="header">
      <div class="container">
        <div
          class="header-container flex flex-row gap-5 {{
            header.logo ? 'justify-between items-center' : 'justify-end items-center'
          }}"
        >
          @if (header.logo) {
            <div class="header-left one-line flex-[0_0_auto]">
              <app-logo [content]="header.logo" />
            </div>
          }
          <div
            class="header-right flex flex-row justify-center items-center gap-2 md:gap-3 xl:gap-5"
          >
            @if (header.mainMenu) {
              <div class="menu-inner">
                <div class="main-menu flex flex-row">
                  @for (menu of header.mainMenu; track trackByFn($index, menu)) {
                    <div class="item">
                      @if (header.params) {
                        <app-item-menu [params]="header.params" [content]="menu" />
                      }
                    </div>
                  }
                </div>
              </div>
            }
            @if (header.search.enable) {
              <app-search-box [content]="header.search" />
            }
            @if (header.actions) {
              <div class="actions">
                @for (action of header.actions; track action) {
                  <button color="primary" mat-raised-button>
                    <app-link [content]="action" />
                  </button>
                }
              </div>
            }
            @if (coreConfig.notify?.enable) {
              <app-notify class="has-icon" />
            }
            @if (header.params.themeSwitch) {
              <app-switch-theme class="has-icon" />
            }
            @if (header.params.userInfo) {
              <app-user-menu />
            }
            <app-lang-switch />
          </div>
        </div>
      </div>
    </header>
  }
  <div class="drawer">
    @if (!show) {
      <mat-toolbar>
        <button mat-icon-button (click)="onToggle()" aria-label="menu icon">
          @if (!isDrawer) {
            <mat-icon>menu</mat-icon>
          }
          @if (isDrawer) {
            <mat-icon>close</mat-icon>
          }
        </button>
        @if (!isDrawer) {
          <span class="spacer"></span>
          <span class="app-name">{{ header.logo?.label }}</span>
          <span class="spacer"></span>
          <app-switch-theme />
          <app-user-menu class="m-left-xs" />
        }
      </mat-toolbar>
    }
    <div [hidden]="!(!show && isDrawer)">
      @if (header.mainMenu) {
        <app-accordion [content]="header.mainMenu" />
      }
    </div>
  </div>
}
